<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">

    <div class="layout-config">
        <div class="layout-config-content-wrapper">
            <a id="layout-config-button" tabindex="0" class="layout-config-button">
                <i class="pi pi-cog"/>
            </a>
            <a id="layout-config-close-button" tabindex="0" class="layout-config-close">
                <i class="pi pi-times"/>
            </a>

            <div class="layout-config-content">
                <h:form>
                    <h4>Locale</h4>
                    <p>Change the locale of the datepicker, schedule and client side validation messages.</p>
                    <p:selectOneMenu id="locale" value="#{app.locale}" converter="#{localeConverter}"
                                     style="width:300px" panelStyle="width:300px;height:350px;" height="350px"
                                     var="l" filter="true" filterMatchMode="startsWith">
                        <f:selectItems value="#{countryService.locales}" var="locale"
                                       itemLabel="#{locale.displayLanguage}" itemValue="#{locale}"/>
                        <p:ajax oncomplete="window.location.reload();"/>
                        <p:column style="width:10%">
                            <span class="flag flag-#{l.code}" style="width: 30px; height: 20px"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Language"/>
                            </f:facet>
                            <h:outputText value="#{l.displayLanguage}"/>
                        </p:column>
                    </p:selectOneMenu>
                    <h4>Input Style</h4>
                    <p:selectOneRadio value="#{app.inputStyle}" onchange="App.updateInputStyle(event.target.value)" columns="2">
                        <f:selectItem itemLabel="Outlined" itemValue="outlined"/>
                        <f:selectItem itemLabel="Filled" itemValue="filled"/>
                        <p:ajax/>
                    </p:selectOneRadio>

                    <h4>Free Themes</h4>
                    <p>Built-in component themes created by the <a
                            href="https://www.primefaces.org/designer/primefaces">PrimeFaces Theme Designer</a>.</p>

                    <h4>PrimeOne Design</h4>
                    <div class="grid free-themes">
                        <div class="col-3">
                            <p:commandLink actionListener="#{app.changeTheme('saga', false)}"
                                           oncomplete="App.changeTheme('saga')" update=":app-theme-logo">
                                <p:graphicImage name="images/themes/saga.png" library="showcase" alt="Saga"/>
                            </p:commandLink>
                            <span>Saga</span>
                        </div>
                        <div class="col-3">
                            <p:commandLink actionListener="#{app.changeTheme('vela', true)}"
                                           oncomplete="App.changeTheme('vela', true)" update=":app-theme-logo">
                                <p:graphicImage name="images/themes/vela.png" library="showcase" alt="Vela"/>
                            </p:commandLink>
                            <span>Vela</span>
                        </div>
                        <div class="col-3">
                            <p:commandLink actionListener="#{app.changeTheme('arya', true)}"
                                           oncomplete="App.changeTheme('arya', true)" update=":app-theme-logo">
                                <p:graphicImage name="images/themes/arya.png" library="showcase" alt="Arya"/>
                            </p:commandLink>
                            <span>Arya</span>
                        </div>
                        <div class="col-3"></div>
                    </div>


                    <h4>Legacy Free Themes</h4>
                    <div class="grid free-themes">
                        <div class="col-3">
                            <p:commandLink actionListener="#{app.changeTheme('luna-blue', false)}"
                                           oncomplete="App.changeTheme('luna-amber', true)" update=":app-theme-logo">
                                <p:graphicImage name="images/themes/luna-blue.png" library="showcase" alt="Luna Amber"/>
                            </p:commandLink>
                            <span>Luna Amber</span>
                        </div>
                        <div class="col-3">
                            <p:commandLink actionListener="#{app.changeTheme('luna-blue', false)}"
                                           oncomplete="App.changeTheme('luna-blue', true)" update=":app-theme-logo">
                                <p:graphicImage name="images/themes/luna-blue.png" library="showcase" alt="Luna Blue"/>
                            </p:commandLink>
                            <span>Luna Blue</span>
                        </div>
                        <div class="col-3">
                            <p:commandLink actionListener="#{app.changeTheme('luna-green', false)}"
                                           oncomplete="App.changeTheme('luna-green', true)" update=":app-theme-logo">
                                <p:graphicImage name="images/themes/luna-green.png" library="showcase"
                                                alt="Luna Green"/>
                            </p:commandLink>
                            <span>Luna Green</span>
                        </div>
                        <div class="col-3">
                            <p:commandLink actionListener="#{app.changeTheme('luna-pink', false)}"
                                           oncomplete="App.changeTheme('luna-pink', true)" update=":app-theme-logo">
                                <p:graphicImage name="images/themes/luna-pink.png" library="showcase" alt="Luna Pink"/>
                            </p:commandLink>
                            <span>Luna Pink</span>
                        </div>
                        <div class="col-3">
                            <p:commandLink actionListener="#{app.changeTheme('nova-light', false)}"
                                           oncomplete="App.changeTheme('nova-light')" update=":app-theme-logo">
                                <p:graphicImage name="images/themes/nova.png" library="showcase" alt="Nova"/>
                            </p:commandLink>
                            <span>Nova</span>
                        </div>
                        <div class="col-3">
                            <p:commandLink actionListener="#{app.changeTheme('nova-dark', false)}"
                                           oncomplete="App.changeTheme('nova-dark')" update=":app-theme-logo">
                                <p:graphicImage name="images/themes/nova-alt.png" library="showcase" alt="Nova"/>
                            </p:commandLink>
                            <span>Nova Alt</span>
                        </div>
                        <div class="col-3">
                            <p:commandLink actionListener="#{app.changeTheme('nova-colored', false)}"
                                           oncomplete="App.changeTheme('nova-colored')" update=":app-theme-logo">
                                <p:graphicImage name="images/themes/nova-accent.png" library="showcase" alt="Nova"/>
                            </p:commandLink>
                            <span>Nova Accent</span>
                        </div>
                    </div>

                   
                </h:form>
            </div>
        </div>
    </div>
</ui:composition>
